<template>
  <div style="color: #fff; background: #458b74; width: 200px; height: calc(100vh - 60px)">
    <div
      v-for="item of menuItems"
      :key="item.id"
      class="item"
      :class="{ active: activeId === item.id ? true : false }"
      @click="chooseItem(item.id)"
    >
      <div>{{ item.label }}</div>
      <div style="margin-top: 5px">
        <el-icon><ArrowRight /></el-icon>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const emit = defineEmits(['submit-menu'])

const menuItems = ref([
  { id: 1, label: '已发布文章' },
  { id: 2, label: '延时发布' },
  { id: 3, label: '草稿箱' },
  { id: 4, label: '我的收藏' },
  { id: 5, label: '我的点赞' }
])

const activeId = ref(1)

const chooseItem = (id) => {
  activeId.value = id
  emit('submit-menu', id)
}
</script>

<style scoped lang="scss">
$back: #00868b;

.item {
  height: 40px;
  display: flex;
  justify-content: space-between;
  padding: 10px;
  line-height: 40px;
}

.item:hover {
  background: $back;
  cursor: pointer;
  color: #fff;
}

.active {
  background: $back;
  color: #fff;
}
</style>
